$font-size:14px;
$spacing:6px;
$main-color:#002b36;

*{
    font-size:$font-size;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

html,body{
    color:white;
    list-style:none ;
    background-color: $main-color;
}//背景颜色

#app{
    min-height: 600px;
    &>header{
        height:$font-size*2+$spacing*2 ;
        font-size: $font-size*1.2;
        background-color: darken($main-color,3%);
        line-height: $font-size*2+$spacing*2;
        &>#app-menu{
            width:40% ;
            min-width: 100px;
            float: left;
            line-height: $font-size*1.2;
            &>li{
                font-size:$font-size*1.2 ;
                line-height: $font-size*2+$spacing*2;
                list-style: none;
                float: left;
                &:hover{
                    background-color:#999; 
                }
            }
        }
        &>h1{
            // padding: $spacing;
            font-weight: 100%;
            width: 30%;
            min-width: 100px;
            overflow: hidden;
            float: left;
            
        }
        &>#app-btns{
            width: 30%;
            min-width: 100px;
            overflow: hidden;
            float: left;
            text-align: right;
            &>span{
                padding: 0px 5px;
                &:hover{
                    background-color:#999; 
                }
            }
            
        }
    }
    &>section{
        min-height: 200px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; //不换行
        justify-content: space-between;
        &>#top-menu{
            flex-grow: 1;
        }
        &>aside{
            flex-grow:0;
        }
        &>#workspace{
            flex-grow: 110;
        }


    }
    &>footer{
         height:$font-size*2+$spacing*1;
       
        background-color: darken($main-color,2.5%);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        &>#btns>li{
            font-size: 20px;
            float: right;
            padding: 0px 10px;
            &:hover{
                background-color:#999; 
            }
        }
        &>#notices>li{
            font-size: 20px;
            float: left;
            padding: 0px 10px;
            &:hover{
                background-color:#999; 
            }

            
        }

    }
}
#main{
    display:table;
    width: 100%;
    &>header#top-menu{
        display: table-cell;
        width: 50px;
        background-color:  darken($main-color,7%); 
        &>#main-menu {
            margin-bottom: 650px;//左边功能区的高度
            &>li{
               &>i {
                font-size: 24px;
                margin: 20px 13px;
                color: #999;
               
            }
            &>i:hover {
                color: #333;
            }
            // &.selected>i {
            //     color: lighten(#333, 10%)
            // } 
            }
            
            
        }

       
    }
    &>aside{
        display: table-cell;
        width: 200px;
        background-color:  lighten($main-color,1%); 
        &:hover{
            background-color:#999; 
        }
    }
    &>#workspace{
        display: table-cell;
        border: 1px solid;
        background-color:  lighten($main-color,3.5%);

    }

}